<style lang="scss">
  @import "~@/styles/base";

  .page-model-rw {
    background-color: #fff;
    border-radius: rpx(10);
    overflow: hidden;
    .icon-wrap {
      padding-top: rpx(20);
      height: rpx(305);
      background-color: $main-color;
      font-size: rpx(34);
      line-height: rpx(40);
      color: #fff;
      text-align: center;
      font-weight: 600;
      .icon {
        display: block;
        width: rpx(150);
        height: rpx(150);
        margin-bottom: rpx(5);
        margin-left: auto;
        margin-right: auto;
      }
    }
    .param-list {
      padding-left: rpx(35);
      padding-right: rpx(35);
      .param {
        padding-top: rpx(40);
        padding-bottom: rpx(40);
        border-bottom: rpx(1) solid #dbe5f0;
        &:last-child {
          border: none;
        }
        .title {
          position: relative;
          font-size: rpx(28);
          color: $black;
          font-weight: bold;
          .value {
            @include middle-center-y();
            right: 0;
            font-size: rpx(32);
            color: $main-color;
            font-weight: normal;
          }
        }
        .slider-wrap {
          display: flex;
          align-items: center;
          padding-top: rpx(45);

          slider {
            margin-left: rpx(85);
            margin-right: rpx(42);
            width: rpx(460);
          }
          .min, .max {
            font-size: rpx(20);
            color: $black;
            width: rpx(100);
          }
        }
      }
    }
  }
</style>
<template>
  <div class="page">
    <div class="page-model-rw">
      <div class="icon-wrap">
        <img class="icon" src="/static/img/mode/mode_pad_ic.png">
        平板模式设置
      </div>
      <ul class="param-list">
        <li class="param">
          <div class="title">
            学习时长
            <div class="value">{{attrs.pad_learningTime}}分钟</div>
          </div>
          <div class="slider-wrap">
            <div class="min">30分钟</div>
            <slider @change="changeConfig($event, 'pad_learningTime')" v-model="attrs.pad_learningTime" min="30" max="90" :backgroundColor="bgColor" :activeColor="activeColor"/>
            <div class="max">90分钟</div>
          </div>
        </li>
        <li class="param">
          <div class="title">
            休息时长
            <div class="value">{{attrs.pad_restTime}}分钟</div>
          </div>
          <div class="slider-wrap">
            <div class="min">1分钟</div>
            <slider @change="changeConfig($event, 'pad_restTime')" v-model="attrs.pad_restTime"  min="1" max="10" :backgroundColor="bgColor" :activeColor="activeColor"/>
            <div class="max">10分钟</div>
          </div>
        </li>
        <li class="param">
          <div class="title">
            亮度调节范围
            <div class="value">{{attrs.pad_brightness}}%</div>
          </div>
          <div class="slider-wrap">
            <div class="min">0%</div>
            <slider @change="changeConfig($event, 'pad_brightness')" v-model="attrs.pad_brightness"  min="0" max="20" :backgroundColor="bgColor" :activeColor="activeColor"/>
            <div class="max">20%</div>
          </div>
        </li>
        <li class="param">
          <div class="title">
            色温调节范围
            <div class="value">{{attrs.pad_colorTemperature}}%</div>
          </div>
          <div class="slider-wrap">
            <div class="min">0%</div>
            <slider @change="changeConfig($event, 'pad_colorTemperature')" v-model="attrs.pad_colorTemperature" min="0" max="100" :backgroundColor="bgColor" :activeColor="activeColor"/>
            <div class="max">100%</div>
          </div>
        </li>
      </ul>
      <div class="btn-reset" @click="reset">回到推荐值</div>
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        activeColor: "#5ba0ee",
        bgColor: '#c8cdd4',
        attrs: {},
        initAttrs: {
          pad_learningTime: 45,
          pad_restTime: 5,
          pad_brightness: 10,
          pad_colorTemperature: 10,
        }
      };
    },
    components: {},
    methods: {
      reset(){
        Store.dispatch('updateDeviceAttrs', this.initAttrs);
        this.attrs = Object.assign(this.attrs, this.initAttrs)
      },
      changeConfig(e, name){
        const params = {};
        params[name] = e.mp.detail.value
        Store.dispatch('updateDeviceAttrs', params);
        this.attrs = Object.assign(this.attrs, params)
      }
    },
    onHide() {
    },
    async onShow() {
      if(!Store.getters.is_login){
        await Store.dispatch('login')
      }
      this.attrs = await Store.dispatch('getCurrentAttrs');
    }
  };
</script>
